<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_setting.bindPhone }}</view>
				<view></view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="u-m-t-20">
			<view style="padding: 0 40rpx;">
				<view class="item-card u-f-32 u-lh-44 flex-center" style="color: #404040;">
					<x-number-code @change="getAreaCode"></x-number-code>
					<input v-model="form.phoneNumber" type="number" maxlength="15" style="width: 100%"
						:placeholder="lang_first.phoneNumberTips" />
				</view>
			</view>
		</view>

		<view class="u-m-t-20">
			<view style="padding: 0 40rpx;">
				<view class="item-card u-f-32 u-lh-44 flex-center-between">
					<input v-model.number="form.code" type="number" style="width: 100%"
						:placeholder="lang_first.codeTips" />

					<view class="color-danger clear-flex" @click="getCode">{{ codetips || lang_first.getCode }}</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<x-fixed-bottom background="rgba(0,0,0,0)">
			<view class="flex-center-center u-lh-42 font-medio u-p-b-90">
				<x-common-btn background="#FD1E43" @click="submitAction()">{{ lang_common.done }}</x-common-btn>
			</view>
		</x-fixed-bottom>

		<!-- 验证码控件 -->
		<u-verification-code :seconds="seconds" :start-text="lang_first.getCode" :end-text="lang_first.twiceCode"
			:change-text="`X${ lang_unit.seconds }`" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import {
		userUpdatePhone
	} from '@/api/personal.js'
	import areacodeObj from '@/utils/areacode.js'
	let list = areacodeObj.list || []
	export default {
		data() {
			return {
				areacode: list[0],

				seconds: 60,
				codetips: '',

				form: {
					phoneNumber: '',
					code: ''
				},
				isClick: false
			}
		},
		methods: {
			// 选择国际区号
			getAreaCode(e) {
				this.areacode = {
					...e
				}
			},
			// 获取验证码
			getCode() {
				if (!this.form.phoneNumber) {
					return this.$api.msg(this.lang_first['phoneNumberTips'])
				}
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
				}
			},
			// 验证码变化后触发
			codeChange(e) {
				this.codetips = e
			},
			// 提交表单
			submitAction() {
				// 空值处理
				let form = this.form

				let {
					phoneNumberTips,
					codeTips
				} = this.lang_first
				for (let key in form) {
					if (!form[key]) {
						this.$api.msg(this.lang_first[key + 'Tips'])
						return;
					}
				}
				let {
					phoneNumber: phone,
					code
				} = form
				let prefixCode = this.areacode.code
				
				if (this.isClick) return;
				this.isClick = true
				
				userUpdatePhone({
					uuid: 1,
					code,
					phone,
					prefixCode
				}).then((res) => {
					this.$api.msg('提交成功')
					this.$store.dispatch('updateUserInfo')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => { this.isClick = false })
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-card {
		padding: 26rpx 34rpx;
		background-color: #F9F9F9;
	}
</style>
